// v-model:show 控制显示
// @close(x) 关闭回调
// @success(x) 成功回调

import { TaDataUser } from '@/utils'
import { defineComponent } from 'vue'

export default defineComponent({
	emits: ['close', 'success', 'update:show'],
	props: {
		show: Boolean
	},
	data() {
		return {
			bgimg: <string>'',
			water: <string>'',
			xleft0: <number>0,
			xleft1: <number>0,
			enable: <boolean>false,
		}
	},
	onHide() {
		console.log('hide')
	},
	watch: {
		show(value: boolean) {
			value ? this.open() : this.close();
		}
	},
	created() {
		this.showImage(true)
	},
	methods: {
		// 关闭组件
		close() {
			// @ts-ignore
			this.$refs.verify.close()
		},
		// 显示组件
		open() {
			// @ts-ignore
			this.$refs.verify.open()
		},
		// 显示状态切换
		changeShow(e: any) {
			if (e.show) {
				setTimeout(()=>this.enable=true,500);
			} else {
				this.$emit('close', this.xleft1)
				this.$emit('update:show', false)
			}
		},
		// 拖动事件处理
		moveEvent(e: any) {
			this.xleft1 = e.detail.x
		},
		// 显示图形验证码
		showImage(force: boolean = false) {
			if (!force && this.bgimg) return
			TaDataUser.verify.image().then((data: any) => {
				// 刷新显示图片
				this.bgimg = data.bgimg
				this.water = data.water
				// 重置滑块位置
				this.xleft1 = 0
				this.xleft0 = this.xleft0 == -1 ? 0 : -1
			});
		},
		// 尝试验证提交
		confirm() {
			let point = Number(this.xleft1 * 600 / Number(uni.upx2px(600)))
			TaDataUser.verify.check(point).then((ret: any) => {
				if (ret.code !== 1) return
				if (ret.data.state === -1) {
					// @ts-ignore
					this.$refs.notify.error('正在刷新')
					return this.showImage(true)
				}
				if (ret.data.state === 0) {
					// @ts-ignore
					return this.$refs.notify.error('验证失败')
				}
				if (ret.data.state === 1) {
					this.$emit('success', point)
					setTimeout(() => this.close(), 1500)
					// @ts-ignore
					return this.$refs.notify.success('验证成功')
				}
			})
		}
	}
})